JavaScript

A5.u.elementstyle Method

Syntax

A5.u.element.style(element,[css[,css[...css]]])

Arguments

elementelementstring

A pointer to a DOM element or the ID of an element.

cssstring

CSS string(s).

Description

Get and/or set the inline style of an element.

Discussion

The A5.u.element.style() method allows for the setting of the inline style of an element. By default the passed in CSS will overwrite all other inline CSS.

CSS can be added to the current inline style by using a "+=" prefix.

A prefix of "-=" can be used to remove specific CSS attributes and values from the current inline style. For example, "-=color: red;" will remove the "color" attribute if the value of it is currently "red". To remove any value a "*" can be used in the values place ("-=color: *;").

A prefix of "~=" can be used to toggle the values of specific CSS attributes. For example, "~=color: red;" would set the "color" to "" if the value is "red", and otherwise set the value to "red".

On remove and toggle the operation is performed on each attribute as opposed to all of the attributes at once. For example, if the inline style was "color: red;" and "~=color: red; background: green;" was passed in, the resulting inline style would be "background: green;".

Zero or more CSS values can be passed in. Each CSS value will be preformed sequentially, allowing for multiple operations in one call. The current inline style of the element will be returned by the A5.u.element.style() method if no CSS is passed in. Otherwise the resulting inline style after the CSS operations are performed will be returned.

Example

// assume "id" is the ID of DIV that wants to be styled
// assume the DIV has an inline style of "color: red; background-color: green;"
var css = A5.u.element.style(id);
// css = "color: red; background-color: green;"
css = A5.u.element.style(id,'+=border: 1px solid red;','-=color: *;');
// css = "background-color: green; border: 1px solid red;"